<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>主页</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link th:href="@{/layer/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/layer/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/layer/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/layer/css/pagination.css}" rel="stylesheet">
    <link th:href="@{/admin/css/department.css}" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:insert="components/aside"></div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <div th:insert="components/header"></div>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div id="department" v-cloak>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-toolbar clearfix">
                                    <div class="col-xs-3"  style="padding: 0px">
                                        <a class="btn btn-primary m-r-5" href="#!" data-toggle="modal" data-target="#addModal" data-whatever="@mdo" ><i class="mdi mdi-plus"></i>新增</a>
                                        <a class="btn btn-info m-r-5" @click="reset"><i class="mdi mdi-rotate-3d"></i>重置</a>
                                    </div>

                                    <div class="col-xs-3 col-md-offset-6" style="padding: 0px">
                                        <div class="input-group">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button">搜索</button>
                                            </span>
                                            <input type="text" class="form-control" @keyup.enter="search" v-model="searchContent" placeholder="请输入职位名称...">
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="center" v-cloak>
                                            <tr>
                                                <th class="col-lg-1">编号</th>
                                                <th class="col-lg-2">部门</th>
                                                <th class="col-lg-2">职位</th>
                                                <th class="col-lg-3">创建时间</th>
                                                <th class="col-lg-2">状态</th>
                                                <th class="col-lg-2">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody class="center">
                                            <tr v-for="(position,index) in positions">
                                                <td v-text="index+startRow"></td>
                                                <td v-text="position.department.name"></td>
                                                <td >
                                                    <span v-text="position.positionName"></span>
                                                </td>
                                                <td v-text="position.createTime"></td>
                                                <td>
                                                    <label class="lyear-switch switch-solid switch-cyan">
                                                        <input type="checkbox" @click="changeStatus(position.positionId,position.status)" :checked="position.status==1?true:false">
                                                        <span></span>
                                                    </label>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="#" @click="toUpd(position)" data-toggle="modal" data-target="#updateModal" data-whatever="@mdo" data-original-title="编辑"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" data-original-title="查看"><i class="mdi mdi-eye"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#" @click="toDelete(position)"data-toggle="modal" data-target="#deleteModal" data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr v-if="(tip==''||tip==null)?false:true">
                                                <td colspan="6">
                                                    <span style="font-size:14px;text-align:center;color: red" v-text="tip"></span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <ul class="m-style" id="pagination">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End 页面主要内容-->
                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document" style="width: 250px;margin-top: 100px">
                        <div class="card card-style">
                            <div class="modal-header">
                                <h4 class="modal-title title">职位修改</h4>
                            </div>
                            <form action="" class="form-style" style="padding: 20px">
                                <div class="input-group m-b-10 text" style="width: 100%">
                                    <select class="form-control" v-model="updForm.updDepName"  name="example-select" size="1" disabled>
                                        <option>部门</option>
                                        <option v-for="dep in departments">{{dep.name}}</option>
                                    </select>
                                </div>

                                <div class="input-group m-b-10 text" style="width: 100%">
                                    <select class="form-control" v-model="updForm.updPositionName"  name="updPosition" size="1">
                                        <option  disabled>职位</option>
                                        <option  disabled>--------</option>
                                        <option>总裁</option>
                                        <option>总裁助手</option>
                                        <option>总监</option>
                                        <option>副总监</option>
                                        <option>经理</option>
                                        <option>副经理</option>
                                        <option>经理助手</option>
                                        <option>部长</option>
                                        <option>员工</option>
                                    </select>
                                </div>

                                <div class="example-box text" >
                                    <label class="content">状态：</label><br>
                                    <label class="lyear-radio radio-inline radio-primary">
                                        <input type="radio" name="updStatus" v-model="updForm.updStatus" value="1"><span>启用</span>
                                    </label>
                                    <label class="lyear-radio radio-inline radio-primary">
                                        <input type="radio" name="updStatus" v-model="updForm.updStatus" value="0" ><span>禁用</span>
                                    </label>
                                </div>
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary"  data-dismiss="modal" @click="updMessage">确认修改</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--添加职位-->
                <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document" style="width: 250px;margin-top: 100px">
                        <div class="card card-style">
                            <div class="modal-header">
                                <h4 class="modal-title title">职位添加</h4>
                            </div>
                            <form action="" class="form-style" style="padding: 20px">
                                <div class="input-group m-b-10 text" style="width: 100%">
                                    <select class="form-control" v-model="addForm.addDepId" id="addDep" name="example-select" size="1" >
                                        <option disabled>部门</option>
                                        <option disabled>--------</option>
                                        <option v-for="dep in departments" :value="dep.dep_id">{{dep.name}}</option>
                                    </select>
                                </div>

                                <div class="input-group m-b-10 text" style="width: 100%">
                                    <select class="form-control" id="addPosition" v-model="addForm.addPositionName" name="addPosition" size="1">
                                        <option disabled>职位</option>
                                        <option disabled>--------</option>
                                        <option>部长</option>
                                        <option>总监</option>
                                        <option>副总监</option>
                                        <option>经理</option>
                                        <option>副经理</option>
                                        <option>经理助手</option>
                                        <option>员工</option>
                                    </select>
                                </div>

                                <div class="example-box text" >
                                    <label class="content">状态：</label><br>
                                    <label class="lyear-radio radio-inline radio-primary">
                                        <input type="radio" name="updStatus" v-model="addForm.addStatus" value="1"><span>启用</span>
                                    </label>
                                    <label class="lyear-radio radio-inline radio-primary">
                                        <input type="radio" name="updStatus" v-model="addForm.addStatus" value="0" ><span>禁用</span>
                                    </label>
                                </div>
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" @click="addMessage" data-dismiss="modal">添加职业</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bs-example-modal-sm" id="deleteModal"  tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;margin: 100px auto">
                    <div class="modal-dialog modal-sm" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <h4 class="modal-title" id="myLargeModalLabel">删除信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row" style="margin-left: 50px;font-size: 20px;font-family: '新宋体'">
                                    <span>编号：</span>
                                    <span>{{deleteMsg.positionId}}</span>
                                </div>
                                <div class="row" style="margin-left: 50px;font-size: 20px;font-family: '新宋体'">
                                    <span>部门：</span>
                                    <span>{{deleteMsg.departmentName}}</span>
                                </div>
                                <div class="row" style="margin-left: 50px;font-size: 20px;font-family: '新宋体'">
                                    <span>职位：</span>
                                    <span>{{deleteMsg.positionName}}</span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal" @click="deleteMessage">确认删除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script type="text/javascript" th:src="@{/layer/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/js/lightyear.js}"></script>
<script type="text/javascript" th:src="@{/layer/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/js/bootstrap-notify.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/js/jquery.pagination.js}"></script>
<script type="text/javascript" th:src="@{/layer/js/main.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/admin/js/position.js}"></script>
</body>
</html>
